<template>
  <view>
    <view @click="openPop">
      <slot v-if="opening" name="active">
        <view class="flex-row justify-center box hover">
          <image class="image" src="/static/icon/zoom-in-filled-pink.svg" />
        </view>
      </slot>
      <slot v-else name="inactive">
        <view class="flex-row justify-center box" hover-class="hover">
          <image class="image" src="/static/icon/zoom-in-filled.svg" />
        </view>
      </slot>
    </view>
    <uni-popup
      ref="popup"
      type="center"
      @change="bindChange"
      :is-mask-click="maskClick"
    >
      <view class="zoomer-content-wrapper">
        <slot name="content" :close="this.closePop">
          <view class="popup">
            <text>{{ content }}</text>
          </view>
        </slot>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: "Zoomer",
  props: {
    content: {
      type: String,
      default: "",
    },
    maskClick: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      opening: false,
    };
  },
  methods: {
    openPop() {
      this.opening = true;
      this.$refs.popup.open("center");
    },
    closePop() {
      this.opening = false;
      this.$refs.popup.close();
    },
    bindChange(e) {
      this.opening = e.show;
    },
  },
};
</script>

<style scoped>
.image {
  width: 48rpx;
  height: 48rpx;
}

.popup {
  padding: 24rpx;
  width: 680rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
  font-size: 48rpx;
}

.box {
  padding: 8rpx;
  border-radius: 16rpx;
}

.hover {
  background-color: #ffeded;
}
.zoomer-content-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
</style>